<template>
	<view class="earlyWarning">
		<view class="" style="height: 160rpx;">
		<view class="mail_List fixed z_ninetynine">
			<view class="mail" style="font-weight: 700;">
				<view class="order">缴费记录</view>
			</view>
		</view>
		<view class="icon fixed z_ninetynine">
			<u-icon name="arrow-left" color="#fefefe" size="40" @click="navigateBack"></u-icon>
		</view>
			
		</view>
		<view class="box" @click="payment">
			<view class="box_title">
				<view style="color: #fff; font-size: 36rpx; font-weight: 600;">停车费</view>
				<view class="" style="display: flex; height: 60rpx; margin-left: 36rpx; color: #fff;">
					<view style="line-height: 60rpx;">05-06 12: 22: 56</view>
					<view class="time">4h</view>
					<view style="line-height: 60rpx;">05-06 16: 21: 05</view>
				</view>
				<view class="" style="color: #fff; width: 400rpx;">
					<text>■</text><text style="margin-left: 20rpx;">旭辉·湖山原著东大门闸道</text>
				</view>
			</view>
			<view class="box_content">
				<view class="" style="margin: 32rpx 0 0 30rpx; color: #fff;">
					金额:
				</view>
				<view class="" style="font-size: 60rpx;margin: 10rpx 0 0 56rpx; color: #fff;">
					￥8
				</view>
				<view class="" style="margin: 10rpx 0 0 90rpx; color: #fff;">
					详情
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {

		}
	},
	methods: {
		payment() {
			this.openUrl('/pagesB/my/paymentRecord/paymentDetails/paymentDetails')
		}
	}
};
</script>

<style lang="scss" scoped>
	.earlyWarning {
		.mail_List {
			overflow: hidden;
			width: 100%;
			background-color: #f2f2f2;

			.mail {
				padding: 10rpx 0;
				// margin-top: 96rpx;
				color: #f2f2f2;
				font-size: 40rpx;
				background-color: #2e576f;
			}

			.order {
				text-align: center;
			}
		}

		.icon {
			position: absolute;
			top: 18rpx;
			left: 20rpx;
		}

		.box {
			display: flex;
			width: 96%;
			height: 230rpx;
			margin: 20rpx auto;
			border-radius: 10rpx;
			background-color: #c5c5c5;

			.box_title {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 200rpx;
				margin: 16rpx 0 0 36rpx;

				.time {
					text-align: center;
					line-height: 34rpx;
					margin: 0 10rpx;
					width: 44rpx;
					height: 34rpx;
					border-bottom: 1px solid #fff;
				}
			}
			.box_content {
				display: flex;
				flex-direction: column;
			}
		}
	}
</style>
